import Taro, {Component} from "@tarojs/taro";
import {View, Image} from "@tarojs/components";
import {toJS} from 'mobx'
import {inject, observer} from '@tarojs/mobx'
import {IStoreProps} from '../../store/Stores'

import {getRuntime,partOf} from '../../utils/common'
import './mall.less'
import './custom.less'
import bg_12 from "../../assets/img/bg_12.jpg";

// 商城-礼品定制中心
interface IHomeProps extends IStoreProps {}

@inject("stores")
@observer
class Custom extends Component<IHomeProps> {
  constructor(props) {
    super(props)
  }

  state = {
    items: []
  }

  componentWillMount(): void {
    Taro.setNavigationBarTitle({ title: '礼品定制中心' })
    this.getAllCustomizedCategory()
  }

  getAllCustomizedCategory() {
    let { PointMallStore } = this.props.stores
    PointMallStore.getAllCustomizedCategory({
      callback: res => {
        console.log(res)
        this.setState({ items: toJS(res.items) })
      }
    })
  }

  handelRouter(url: string = '/pages/index/index'): void {
    getRuntime().navigateTo(url)
  }

  render() {
    let { items } = this.state
    return (
      <View className='mall-custom-center'>
        {
          items.length>0&&
            <View>
               <Image className='header-pic' src={bg_12} />
               <View className='center-con'>
                 {
                   items.map((item,index) => {
                     return(
                       <View className='custom-item' key={item.id} onClick={this.handelRouter.bind(this,'/pages/mall/custom_list?id='+item.id)}>
                         <Image className='custom-icon' src={item.cateGoryLogo} />
                         <View className='info'>
                           <View className='title list-title'>{item.cateGoryName}</View>
                           <View className='desc list-info'>{partOf(item.introduce, 20)}</View>
                         </View>
                         <View className={'btn-banli btn'+((index%4*1)+1)}>立即定制</View>
                       </View>
                     )
                   })
                 }
               </View>
            </View>
        }
        {items.length<=0&&<View className='page-none-info page-none-info-center' style={{backgroundColor:'#ededed'}}>商品上线中, 敬请期待...</View> }
      </View>
    )
  }
}

export default Custom
